<style lang="less">
</style>
<template>
  <div>
    <el-form style="" :key="dialogKeyObjInfo" ref="objInfo" :model="objInfo" :rules="objInfoRules" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="账户名称">
            <el-input v-model="objInfo.account" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="objInfo.realName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系手机" prop="phone">
            <el-input v-model="objInfo.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="objInfo.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" label-width="100px">
            <el-select  v-model="objInfo.sex" placeholder="请选择性别" style="width: 100%">
              <el-option v-for="item in $store.getters.MEMBER_GENDER"
                         :key="item.dictVal"
                         :label="item.cnDictValname"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业名称">
            <el-input v-model="objInfo.companyName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="通讯地址">
            <el-cascader style="width: 100%" :props="addressProps" :options="addressDictDate" change-on-select
                         placeholder="请选择省市区县"
                         v-model="objInfo.objInfoAddressSelect">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址">
            <el-input v-model="objInfo.street"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input type="textarea" :rows="4" v-model="objInfo.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="text-align: left">
        <el-button type="primary" @click="handleSubmitObjInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getTruckBellwetherById,
  updateTruckBellwether
} from '../../../api/v3/TruckBellwether';
import { getTreeIdAndNameToMap } from '../../../lib/util.js';
import { addressDictsSimpleWithType } from '../../../api/system/addressDict';

export default {
  name: 'TruckBellwetherInfo',
  props: {
    TruckBellwetherIdInfo: null
  },
  data () {
    return {
      // 基本资料
      dialogKeyObjInfo: 0,
      objInfo: {
        objInfoAddressSelect: []
      },
      objInfoRules: {
        realName: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入11位手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur'}
        ],
        email: [
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
        ]
      },
      addressDictDate: [],
      addressProps: {
        value: 'id',
        label: 'name'
      }
    };
  },
  watch: {},
  methods: {
    // 获取领头羊基本资料
    getObjInfoById () {
      getTruckBellwetherById(this.$route.params.id).then(res => {
        if (res.status === 200) {
          let info = res.data;
          this.objInfo = info;
          this.objInfo.objInfoAddressSelect = [info.provinceId, info.cityId, info.countyId];
        };
      });
    },
    // 基本资料修改
    handleSubmitObjInfo () {
      // 表单验证
      this.$refs['objInfo'].validate((valid) => {
        if (valid) {
          if (this.objInfo.objInfoAddressSelect[0]) {
            if (!this.objInfo.objInfoAddressSelect[2]) {
              return this.$message.error('请选择到区县一级地址');
            } else {
              let addressMapList = getTreeIdAndNameToMap(this.objInfo.objInfoAddressSelect, this.addressDictDate);
              this.objInfo.provinceId = this.objInfo.objInfoAddressSelect[0];
              this.objInfo.province = addressMapList.get(this.objInfo.objInfoAddressSelect[0]);
              this.objInfo.cityId = this.objInfo.objInfoAddressSelect[1];
              this.objInfo.city = addressMapList.get(this.objInfo.objInfoAddressSelect[1]);
              this.objInfo.countyId = this.objInfo.objInfoAddressSelect[2];
              this.objInfo.county = addressMapList.get(this.objInfo.objInfoAddressSelect[2]);
            };
          }
          this.submitLoading = true;
          this.isView = true;
          updateTruckBellwether(this.objInfo.id, this.objInfo).then((res) => {
            this.$message('基本资料已保存');
          }).catch((res) => {
            this.$message.error(res.response.data.message);
          });
          this.submitLoading = false;
        } else {
          return false;
        }
      });
    },
    addressValue (value) {
      if (value) {
        return value;
      } else {
        return null;
      }
    },
    // 地址数据删除为空的子地址
    clearEmptyChildren (items) {
      let o = this.clearEmptyChildren;
      items.forEach(function (v) {
        if (v.children.length === 0) {
          delete v.children;
        } else {
          o(v.children);
        }
      });
    }
  },
  // 初始化数据
  mounted () {
    this.$store.commit('initDict');
    addressDictsSimpleWithType('level=1,2,3').then(res => {
      let list = res.data.detailModelList;
      this.addressDictDate = list;
      this.clearEmptyChildren(list);
    }).catch(err => {
      console.error(err);
    });
    this.getObjInfoById();
  }
};
</script>
